<script setup>
import { ref , defineEmits , defineProps} from 'vue'
import request from '@/api/request'
let emits = defineEmits(["ref-table"])
let props = defineProps(['data']) // 接收父组件传递的数据
let material = ref({
    ...props.data
})
let materials = ref([])
let onSubmit = () => {
    console.log(material.value);
    
     request({
        url: '/material/update',
        method: 'put',
        data: material.value
    }).then(res => {
         emits("ref-table")
    })
   
}
let loadMaterial = ()=>[
    request.get('/material/index').then(res=>{
        materials.value = res.data;
    })
]
loadMaterial()
const value1 = ref(true)

const radio1 = ref('1')
let planType = ref('1')
// let material = ref({})

let minStock = ref(1)
let maxStock = ref(100)

const handleMinStockChange = (value) => {
  console.log(value)
}
const handleMaxStockChange = (value) => {
  console.log(value)
}

// BOM data
const bomData = ref([
  { id: 'YCL00053', name: '2883-3', spec: '', unit: 'PCS', ratio: 1, remark: '' },
  { id: 'YCL00052', name: '2883-2', spec: '', unit: 'PCS', ratio: 1, remark: '' }
])

const handleAddBOM = () => {
  bomData.value.push({ id: '', name: '', spec: '', unit: '', ratio: 1, remark: '' })
}

const handleDeleteBOM = (index) => {
  bomData.value.splice(index, 1)
}
let num1 = ref(200)
let num2 = ref(5000)
const handleChange1 = (value=number) => {
  console.log(value)
}
const handleChange2 = (value=number) => {
  console.log(value)
}
//选项卡
const activeName = ref('first')


</script>

<template>
    <div>
        <el-card>
            <template #header>
              
            </template>
            <el-form :model="material" ref="form" :rules="rules" label-width="120px" :inline="false" size="default" class="card_wrap">
                <div class="form-row">
                    <el-form-item label="* 物料编码"  class="c_item">
                        <el-input v-model="material.materialId" style="width: 150px;" disabled></el-input>
                        <span class="auto-generate">自动生成</span>
                    </el-form-item>
                    <el-form-item label="* 物料名称" class="c_item">
                        <el-input v-model="material.materialName" style="width: 150px;" ></el-input>
                    </el-form-item>
                </div>
                
                <el-form-item label="规格型号" class="c_item_big">
                    <el-input v-model="material.specificationsAndModels" placeholder="请输入规格型号" style="width: 800px;"></el-input>
                </el-form-item>
                
                <div class="form-row">
                    <el-form-item label="* 单位" class="c_item">
                        <el-select placeholder="单位" v-model="material.unit" style="width: 150px;" value="个">
                            <el-option value="个" label="个"></el-option>
                            <el-option value="kg" label="kg"></el-option>
                            <el-option value="g" label="g"></el-option>
                            <el-option value="PCS" label="PCS"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="" class="c_item">
                            物料/产品分类
                            <el-select placeholder="选择所属分类" v-model="material.category" style="width: 150px;">
                                <el-option value="wl" label="物料"></el-option>
                                <el-option value="cp" label="产品"></el-option>
                            </el-select>
                            </el-form-item>
                </div>
                
                <el-form-item label="" class="c_item">
                                是否启用
                                <el-radio-group v-model="material.isEnabled">
                                <el-radio :value="1" size="large">是</el-radio>
                                <el-radio :value="0" size="large">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                <el-form-item label="" class="c_item">
                              是否安全库存
                                <el-radio-group v-model="planType">
                                    <el-radio value="1" size="large">是</el-radio>
                                    <el-radio value="2" size="large">否</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item v-if="planType==1" label="">
                                安全库存量
                                <el-input-number v-model="num1" :min="200" :max="2000"@change="handleChange1" />
                            </el-form-item>
                      
                
                <el-form-item label="物料图片" class="c_item_big">
                    <el-upload
                        action="#"
                        list-type="picture-card"
                        :auto-upload="false">
                        <el-icon><Plus /></el-icon>
                    </el-upload>
                    <div class="upload-tip">请上传大小不超过 5MB 格式为 png/jpg/jpeg 的文件</div>
                </el-form-item>
                

                
                <!-- <el-tabs
                    v-model="activeName"
                    type="card"
                    class="demo-tabs"
                    @tab-click="handleClick"
                >
                    <el-tab-pane label="Bom组成" name="first" class="c_item_big">
                        <div class="bom-actions">
                        <el-button type="primary" @click="handleAddBOM">+ 新增</el-button>
                        <el-button type="danger">删除</el-button>
                    </div>
                    
                    <el-table :data="bomData" border style="width: 100%">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="id" label="物料编码"></el-table-column>
                        <el-table-column prop="name" label="物料名称"></el-table-column>
                        <el-table-column prop="spec" label="规格"></el-table-column>
                        <el-table-column prop="unit" label="单位"></el-table-column>
                        <el-table-column prop="ratio" label="使用比例"></el-table-column>
                        <el-table-column prop="remark" label="备注"></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                                <el-button size="small" type="danger" @click="handleDeleteBOM(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    
                    </el-tab-pane>
               </el-tabs>
                 -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" class="right-bottom">确定修改</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <router-view/>
    </div>
</template>

<style scoped>
.card-header {
    font-size: 18px;
    font-weight: bold;
}

.c_item {
    flex: 1;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/2);
    min-width: calc((100% - 10px)/2);
    max-width: calc((100% - 10px)/2);

    &:nth-child(3n) {
        margin-right: 0;
    }
}

.c_item_big {
    flex: 2;
    margin: 0px 5px 15px 0;
    width: calc((100%-10px)/1);
    min-width: calc((100% - 10px)/1);
    max-width: calc((100% - 10px)/1);

    &:nth-child(3n) {
        margin-right: 0;
    }
}

.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.form-row {
    display: flex;
    width: 100%;
}

.auto-generate {
    color: #999;
    font-size: 12px;
    margin-left: 10px;
}

.upload-tip {
    color: #999;
    font-size: 12px;
    margin-top: 10px;
}

.bom-actions {
    margin-bottom: 15px;
}

.pagination {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.right-bottom{
    margin-top: 300px;
 margin-left: 100px ;
}
</style>